<template>
  <div>
    <div class="beachTable">
      <el-table
        style="width: 100%"
        border
        :data="list"
        text-align="center"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        size="small"
      >
        <el-table-column prop="monitorCode" label="测点编号"> </el-table-column>
        <el-table-column prop="monitorName" label="测点名称"></el-table-column>
        <el-table-column prop="tunnel" label="测点通道号"></el-table-column>
        <el-table-column prop="value" label="X数值(mm)"></el-table-column>
        <el-table-column prop="depth" label="深度(mm)"></el-table-column>
        <el-table-column prop="collectDate" label="测量时间"></el-table-column>
      </el-table>
    </div>
    <!-- <div id="beachCharts" class="beach"></div> -->
  </div>
</template>

<script>
import axios from "axios";
import { getLatestNb } from "../../../api/Monitoring";
import moment from "moment";
export default {
  name: "SeepageLine",
  components: {},
  props: {
    node: Object,
  },
  data() {
    return {
      list: [],
      realDataInterVal: null,
    };
  },
  created() {
    // this.realDataInterVal = setInterval(async () => {

    this.getList();
    // }, 5000)
  },
  beforeDestroy() {
    // clearInterval(this.realDataInterVal)
  },
  methods: {
    async getList() {
      const res = await getLatestNb({
        monitorCode: this.node.monitorCode,
        count: 17,
      });
      console.log(res);
      if (res.resultCode == "200") {
        let dataList = [];
        for (let i = 0; i < res.parameter.length; i++) {
          let tunnelCount = res.parameter[i].tunnelDepthList.length;
          for (let j = 0; j < tunnelCount; j++) {
            // this.list = res.parameter
            if (res.parameter[i].tunnelDepthList[j].xdata !== null) {
              let obj = {
                monitorCode: "",
                monitorName: "",
                tunnel: "",
                value: "",
                depth: "",
                collectDate: "",
              };
              obj.monitorCode = res.parameter[i].monitorCode;
              obj.monitorName = res.parameter[i].monitorName;
              obj.collectDate = res.parameter[i].theDate;
              obj.tunnel = res.parameter[i].tunnelDepthList[j].tunnel;
              obj.value = res.parameter[i].tunnelDepthList[j].xdata;
              obj.depth = res.parameter[i].tunnelDepthList[j].depth;
              dataList.push(obj);
              // this.list[i].depth = res.parameter[i].tunnelDepthList[j].depth
            }

            // console.log(this.list)
            // var obj1 = new Object();
            // obj1.monitorCode = res.parameter[i].monitorCode;
            // this.list[i].monitorCode = obj1;
          }
        }
        this.list = dataList;
        console.log(this.list);
        this.list.forEach((item) => {
          item.value = item.value.toFixed(3);
          item.depth = item.depth.toFixed(3);
        });
        // this.list.unshift({
        //   data:list.data,
        //   monitorCode:list.monitorCode,
        //   monitorName:list.monitorName,
        //   theDate:list.theDate
        // })
        //   this.newObj.length > 17 ? this.newObj.splice(17, 1) : null
      } else if (res.resultCode == "204") {
        this.list = [];
        // this.$message.info('暂无数据')
      }
    },
  },
  mounted() {},

  computed: {},
  watch: {},
};
</script>

<style scoped>
.beach {
  /* width: 1000px; */
  height: 50vh;
  margin-top: 20px;
  width: 100%;
  /* margin: 0 auto; */
}
.beachTable {
  height: 82vh;
  overflow: auto;

  /* margin-top: 50px; */
}
.beachTable >>> .el-table tr:nth-child(odd) {
  /* background: pink; */
  text-align: center !important;
  color: #000;
  font-size: 12px;
}
.beachTable >>> .el-table tr:nth-child(even) {
  /* background: #cfeed2; */
  background: rgba(0, 0, 0, 0.05);
  text-align: center !important;
  color: #000;
  font-size: 12px;
}
</style>